<template>
  <div class="ek-textarea">
    <el-input 
      type="textarea"
      v-model="value" 
      @blur="blur" 
      @focus="focus"
      @change="change"
      @input="input" 
      :placeholder="placeholder"
      :disabled="disabled"
      :show-word-limit="true"
      :maxlength="maxlength"
      :size="size"
      :rows="rows"
      />
  </div>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  computed,

} from "vue";

const props = defineProps({
  // 值
  modelValue:{
    type: [String, Number],
    default: "",
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 默认显示
  placeholder: {
    type: String,
    default: "请输入",
  },
  // 最大长度限制
  maxlength: {
    type: [String, Number],
    default: '',
  },
  size: {
    type: String,
    default: 'default'
  },
  rows: {
    type: [Number],
    default: 2,
  }

});


const emit = defineEmits(['update:modelValue','blur','focus','change','input'])


const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 失去焦点
function blur(event) {
  emit("blur", event);
};
// 聚焦
function focus(event) {
  emit("focus", event);
};
// 改变事件
function change(event) {
  emit("change", event);
};
// 实时改变事件
function input(event){
  emit("input",event);
};


</script>

<style scoped lang="scss"></style>
